<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>弹出属性选择页面2</title>
	<link rel="stylesheet" type="text/css" href="../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../css/app.css" />
</head>
<style>
	body,
	html {
		background-color: rgba(0, 0, 0, 0);
	}

	.attr-tag {
		height: 1.5rem;
		line-height: 1.5rem;
		display: inline-block;
		padding: 0 1rem;
		border-radius: 1rem;
		box-sizing: border-box;
		border: 1px solid #e6e6e6;
		color: #999999;
		font-size: 0.65rem;
		margin-right: 0.75rem;
		margin-bottom: 0.75rem;
	}

	.attr-tag.active {
		color: #FE0000;
		border-color: #FE0000;
	}

	.aui-btn-plus {
		border: 1px solid #999999;
		border-radius: 50%;
		width: 1rem;
		height: 1rem;
		line-height: 1.2;
		color: #999999;
	}

	.listem {
		color: rgba(0, 90, 147, 1);
		background: rgba(227, 244, 255, 1) !important;
		border: 0.01rem solid rgba(0, 90, 147, 1);
	}

	.add_decrease_count {
		width: 3.85rem;
		height: 1.1rem;
		border-radius: 0.07rem;
		display: flex;
		justify-content: space-between;
		margin-bottom: 0.5rem
	}

	.add_decrease_count>div {
		width: 1.15rem;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.add_decrease_count>div img {
		width: 0.4rem;
		height: 0.4rem;
	}

	.brand_text {
		float: left;
		width: 50%;
		padding-left: 0.1rem;
		font-size: 0.7rem;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(46, 46, 46, 1);
		margin-top: 0.1rem;
	}

	.class_name {
		font-size: 0.7rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 90, 147, 1);
		float: right;
		margin-top: 0.1rem;
	}

	.return_img {
		width: 1.1rem;
		height: 1.1rem;
		float: right;
		margin-right: 0.2rem;
	}

	.btn_certain {
		width: 17.25rem;
		height: 2.3rem;
		border-radius: 0.3rem;
		font-size: 0.8rem;
		font-family: PingFangSC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 2.3rem;
		border-radius: 0.3rem !important;
		display: inline-block;
		background: rgba(0, 90, 147, 1);
	}

	.btnSure {
		text-align: center;
		margin-top: 1.5rem;
		width: 100%;
		float: left;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		bottom: 1rem;
	}

	.aui-btn {
		transition: all 0.1s ease-out;
	}

	.aui-btn:active {
		color: #fff;
		background: rgba(0, 90, 147, 0.8);
	}
</style>

<body>
	<div id="app" v-cloak="">
		<!--加入购物车弹窗-->
		<div v-if="">
			<div class="aui-mask aui-mask-in" style="z-index: 991;" tapmode onclick="close_frame()" @touchmove.prevent></div>
			<div class="ming-bg-white" style="padding: 0 0.75rem;position: fixed;bottom: 0;width: 100%;z-index: 992;padding-bottom: 2.2rem;">
				<img tapmode @click="close_frame()" style="position: absolute;height: 1.1rem;width:1.1rem;right: 0.5rem;top: 1rem;" src="../image/btn/btn-close-wind.png" />
				<!-- 商品图片 -->
				<img class="aui-img-round-5" style="position: absolute;display:inline-block;width:4rem;height: 4rem;left: 0.75rem;top: 1.0rem;" :src="pic" />
				<!-- 价位 库存 已选择 -->

				<div style="margin-left:4.75rem;margin-top:1rem;display:inline-block;height:4rem;">
					<div>
						<div style="display:inline-block;width:3rem;color:#FF6642;font-weight:600;padding-top:0.5rem;">
							<span style="font-size:1.1rem;font-family:Akrobat-Bold;font-weight:600;color:rgba(233,0,0,1);">
									<span style="font-size:0.75rem;font-family:PingFangSC-Semibold;">￥</span>{{price}}
							</span>
						</div>
						<div class=" aui-font-size-12" style="color:#969699;">
							<span style="display:inline-block;font-size:.6rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(150,150,153,1);">库存：{{kucun}}件</span><br>
							<span class="aui-padded-r-5" style="display:inline-block;font-size:.6rem;margin-top:0.3rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(128,128,128,1);">已选择：
									<span v-for="vo in good_sku_view">{{vo}}</span></span>
						</div>
					</div>
				</div>
				<div class=" " style="width:100%;padding-top: 1.25rem;margin-bottom:2rem;">
					<div class="brand_text" >选择品牌{{sku_id}}</div>
					<div style="float:left;width:50%;" tapmode @click="comment_order(goodsinfo.id)">
						<img class="return_img" src="../image/btn/btn-right.png"  alt="">
						<span class="class_name">{{cloose_name}}</span>
					</div>
				</div>
				<div>
					<div v-for="(vo,index) in goodSku.good_attr" style="padding-top: 0.05rem;">
						<div style="font-size:.7rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(51,51,51,1);margin-bottom:0.5rem;">
							{{vo.name}}
						</div>
						<div v-for="item in vo.sub" tapmode @click="$set(good_sku_view,index,item)" :class="{'listem':item==good_sku_view[index]}" id="css" style="background:rgba(240,241,242,1);display:inline-block;padding:.25rem .9rem;text-align:center;border-radius:.2rem;margin-right:.45rem;margin-bottom:1rem;font-family:PingFangSC-Regular;font-size:0.6rem;font-weight:400;line-height:0.85rem;">
							{{item}}
						</div>
					</div>
					<!-- 添加购买数量 -->
					<div style="display:flex;justify-content: space-between ;float:left;margin-bottom:2rem;width:100%">
						<div style="float:left;">
							购买数量
						</div>
						<!-- 点击增加或减少数量 -->
						<!-- <div style="border:0.01rem solid rgba(225,225,229,1);width:5.3rem;	height:1.5rem;	border-radius: 0.07rem;float:left;">
								 <div style="border:0.01rem solid rgba(225,225,229,1);float:left;width: 1.6rem;height: 100%;text-align:center;display: flex;	justify-content: center;
						 			align-items: center;">
									 <img src="../image/icon/icon-cut-none.png" alt="" v-if="count <= 1" style="width:0.6rem;height:0.6rem">
									 <img src="../image/icon/icon-cut.png" alt="" v-else style="width:0.6rem;height:0.6rem">
								 </div>
								 <div style="float:left;width:2.1rem;height100%;font-size:0.6rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(50,50,51,1);text-align:center;line-height:1.2rem;"> {{count}}</div>
								 <div  style="border:0.01rem solid rgba(225,225,229,1);float:left;width: 1.6rem;height: 100%;text-align:center;display: flex;	justify-content: center;
						 			align-items: center;">
									 <img src="../image/icon/icon-plus-none.png" alt="" v-if="count == kucun" style="width:0.6rem;height:0.6rem">
									 <img src="../image/icon/icon-plus.png" alt="" v-else style="width:0.6rem;height:0.6rem">
								 </div>
							</div> -->

						<!-- <div class="add_decrease_count" style="float:right;margin-right:5rem;">
								<div tapmode @click="if(count<2)return;count-=1;" style="border-right:0.03rem solid rgba(225,225,229,1);">
									<img src="../image/icon/icon-cut-none.png" alt="" v-if="count <= 1" style="width:0.6rem;height:0.6rem">
									<img src="../image/icon/icon-cut.png" alt="" v-else style="width:0.6rem;height:0.6rem">
								</div>
								<div style="width:2.1rem;height100%;font-size:0.6rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(50,50,51,1);text-align:center;line-height:1.1rem;"> {{count}}</div>
								<div tapmode @click="if(count>=kucun){count=kucun;return;};count+=1"class="" style="border-left:0.03rem solid rgba(225,225,229,1);">
									<img src="../image/icon/icon-plus-none.png" alt="" v-if="count == kucun" style="width:0.6rem;height:0.6rem">
									<img src="../image/icon/icon-plus.png" alt="" v-else style="width:0.6rem;height:0.6rem">
								</div>
							</div> -->
						<div class="add_decrease_count" style="float: right;">
							<div tapmode @click="if(count<2)return;count-=1;">
								<img src="../image/icon/icon-cut-none.png" alt="" v-if="count <= 1" style="width:0.6rem;height:0.6rem;">
								<img src="../image/icon/icon-cut.png" alt="" v-else style="width:0.6rem;height:0.6rem;">
							</div>
							<div style="width:2.1rem;height:100%;font-size:0.6rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(50,50,51,1);text-align:center;line-height:1.1rem;background:#F0F1F2;"> {{count}}</div>
							<div tapmode @click="if(count>=kucun){count=kucun;return;};count+=1">
								<img src="../image/icon/icon-plus-none.png" alt="" v-if="count == kucun" style="width:0.6rem;height:0.6rem;">
								<img src="../image/icon/icon-plus.png" alt="" v-else style="width:0.6rem;height:0.6rem;">
							</div>
						</div>
					</div>
				</div>

			</div>
			<!-- 点击"确定"购买 -->
			<div class="btnSure">
				<div tapmode @click="createGoodCart()" class="aui-btn aui-btn-block ming-text-white aui-font-size-16 btn_certain" :class="{'aui-bg-linear':kucun>0}" >
					确定
				</div>
			</div>
		</div>

	</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script>
	var sku_id;
	var vm = new Vue({
		el: "#app",
		data: {
			goodsinfo: {},
			tuaninfo: {},
			goodSku: {
				good_attr: [],
				good_sku: []
			},
			count: 1,
			good_sku_view: [],
			type: 'good', //'good'普通商品falg-2,'tuan'团购商品falg-4，'miao'秒杀商品falg-3，对应返回的page字段
			count: 1,
			is_cart: false,
			is_tuan: false,
			now_time: Date.parse(new Date()) / 1000,
			share_pic: '',
			pic_done: false,
			loginout: false,
			share_show: false,
			share_gold: 0,
			tuan_uid_num: 0,
			id: 0,
			cloose_name: '',
			brand_id: 0,
			sku_id: 0,
			brand_price:0
		},
		methods: {
			get_list: function() {
				get_data('api/Good/goodSku', {
					good_id: vm.goodsinfo.id
				}, function(ret) {
					// alert(JSON.stringify(ret, null, 2))
					if (ret.status) {
						vm.good_sku_view = vm.goodsinfo.good_sku_view
						vm.goodSku = ret.data

						// vm.type = ret.data.page
						// alert(JSON.stringify(vm.goodsinfo.id))
					}
				}, false)
			},
			createGoodCart: function() {
				if (vm.loginout) {
					openWin_login();
					return;
				}
				if (vm.count == '0') {
					toast('您当前选择的商品没有库存')
					return;
				}

				if (vm.brand_id == 0) {
					toast('请选择品牌')
				}


				var name = vm.good_sku_view.join('|');
				console.log(name)
					// console.log(vm.good_sku_view);
					// console.log(JSON.stringify(this.goodSku.good_sku))
				this.goodSku.good_sku.forEach(function(el) {
					console.log(el.good_sku)
					if (name === el.good_sku) {
						console.log(el.sku_id)
						vm.sku_id = el.sku_id;

						// 	if (el.stock_num) {
						// 		if (vm.type == 'tuan' && vm.is_tuan) {
						// 			price = el.tuan_price;
						// 		} else if (vm.type == 'miao') {
						// 			price = el.miao_price;
						// 		} else {
						// 			price = el.price;
						// 		}
						//
						// 	} else {}
					}
				});

				if (vm.is_cart == 'true') {
					// alert(JSON.stringify(vm.goodsinfo))
					// alert(vm.sku_id)
					get_data('api/GoodCart/createGoodCart', {
						token: $api.getStorage('token'),
						good_id: vm.goodsinfo.id,
						good_num: vm.count,
						good_sku: vm.good_sku_view.join('|'),
						brand_id: vm.brand_id,
						sku_id: vm.sku_id,
					}, function(ret, err) {
						// alert(ret)
						toast(ret.msg)
						if (ret.status) {
							send_event('cart_ref')
						}
						close_frame();
					})
				}

				if (vm.is_cart == 'false') {
					var cost_price = vm.type == 'tuan' ? vm.goodsinfo.tuan_price : vm.goodsinfo.current_price;
					var flag = vm.type == 'good' ? 2 : vm.type == 'tuan' ? 4 : 3
					if (vm.type == 'tuan' && !vm.is_tuan) {
						cost_price = vm.goodsinfo.current_price
						flag = 2
						log(111);
						log(cost_price)
					}

					$api.setStorage('goods_info', {
						info: [{
							good_id: vm.goodsinfo.id,
							cover: vm.goodsinfo.cover,
							title: vm.goodsinfo.title,
							cost_price: vm.price/vm.count,
							good_sku: vm.good_sku_view.join('|'),
							good_num: vm.count,
							barnd_id: vm.brand_id,
							sku_id: vm.sku_id,
						}]
					})
					if (flag == 4) {
						$api.setStorage('tuan_id', vm.goodsinfo.tuan_id)
					}
					if (flag == 3) {
						$api.setStorage('miao_id', vm.goodsinfo.miao_id)
					}
					$api.setStorage('flag', flag)
					openWin_create_order()
				}
			}
		},
		computed: {
			pic: function() {
				pic = '';
				// alert(JSON.stringify(vm.goodsinfo.img[0]));
				var name = this.good_sku_view.join('|');
				this.goodSku.good_sku.forEach(function(el) {
					if (name === el.good_sku) {
						if (el.stock_num) {
							pic = el.cover;
						} else {}
					} else {
						pic = vm.goodsinfo.img[0]
					}
				})
				return pic;
			},
			kucun: function() {
				var kucun = false;
				// return 100;
				if (this.good_sku_view.length == 0) {
					return this.goodsinfo.stock_num;
				}
				console.log(JSON.stringify(this.good_sku_view))
				console.log(JSON.stringify(this.goodSku.good_attr))
				console.log(JSON.stringify(this.goodSku.good_sku))
				if (this.good_sku_view.length != this.goodSku.good_attr.length) {
					vm.count = 0
					return '0';
				}
				var name = this.good_sku_view.join('|');
				this.goodSku.good_sku.forEach(function(el) {
					console.log(name)
					console.log(el.good_sku)
					if (name === el.good_sku) {
						if (el.stock_num) {
							kucun = el.stock_num;

							vm.count = 1
						} else {
							kucun = '0'
							vm.count = 0
						}
					}
				})
				if (!kucun) {
					kucun = '0';
					vm.count = 0
				}
				return kucun;
			},
			price: function() {
				if (vm.is_tuan) {
					var price = this.goodsinfo.tuan_price * this.count;
				} else {
					var price = this.goodsinfo.current_price * this.count;
				}
				//alert(JSON.stringify(this.good_sku_view))
				var name = this.good_sku_view.join('|');
				this.goodSku.good_sku.forEach(function(el) {

					if (name === el.good_sku) {
						console.log(el.stock_num)
							// vm.sku_id = el.sku_id;

						if (el.stock_num) {
							if (vm.type == 'tuan' && vm.is_tuan) {
								price = el.tuan_price;
							} else if (vm.type == 'miao') {
								price = el.miao_price;
							} else {
								price = el.price;
							}

						} else {}
					}
					// console.log(vm.sku_id)
				})
				return price.toFixed(2);
			}
		}
	})
	apiready = function() {
		vm.goodsinfo = $api.getStorage('goodsinfo')
		vm.type = vm.goodsinfo.page;
		vm.is_cart = $api.getStorage('is_cart')
			// console.log(JSON.stringify(vm.goodsinfo))
		vm.tuaninfo = $api.getStorage('tuaninfo')
			// vm.is_tuan = $api.getStorage('is_tuan')
		vm.is_tuan = api.pageParam.is_tuan;
		$api.rmStorage('tuaninfo')
		vm.get_list()
		vm.id = $api.getStorage('id')
		$api.rmStorage('cloose_name')
		vm.cloose_name = $api.getStorage('cloose_name')
		add_event('choose_brand_f', function(ret) {
			vm.cloose_name = ret.data.name
			vm.brand_id = ret.data.id
			vm.brand_price =  ret.data.price
		})




		// alert(JSON.stringify(vm.goodsinfo.cover))
	};
	// function sel_sku() {
	// 	if (vm.count == '0') {
	// 		return;
	// 	}
	// 	get_data('api/GoodCart/editGoodCart', {
	// 		token: $api.getStorage('token'),
	// 		good_cart_id: 34,
	// 		good_num: 2,
	// 		good_sku: '红色'
	// 	}, function(ret) {
	// 		alert(JSON.stringify(ret))
	// 		if (ret.status) {
	// 			send_event('cart_ref')
	// 			close_frame()
	// 		}
	// 	})
	// }

	function comment_order(data) {

		$api.setStorage('choose_id', data);
		open_win('choose_brand', 'choose_brand.html', false)
	}
</script>

</html>
